<template>
	<main-content
		:tableHeight.sync="tableHeight"
		:otherDependenComponents="otherDependenComponents"
	>
		<template slot="query">
			<el-form
				ref="form"
				:inline="true"
				:model="queryData"
				class="flex-warp-container"
			>
				<el-form-item
					:label="`${$t('common.belong_merchant')}:`"
					class="flex-row-container"
					label-width="77px"
				>
					<merchant-select
						v-model="queryData.queryCondition.merchantId"
					></merchant-select>
				</el-form-item>
				<el-form-item
					:label="`${$t('member.rebate_frozen_time')}:`"
				>
					<el-date-picker
							v-model="rebateFrozenTime"
							size="medium"
							:picker-options="pickerShortcut2"
							format="yyyy-MM-dd HH:mm:ss"
							type="datetimerange"
							range-separator="-"
							:start-placeholder="$t('common.start_date')"
							:end-placeholder="$t('common.end_date')"
							align="right"
							value-format="timestamp"
							style="width: 320px"
							:default-time="defaultTime"
						></el-date-picker>
				</el-form-item>
				<el-form-item
					:label="`${$t('member.rebate_unfrozen_time')}:`"
				>
					<el-date-picker
							v-model="rebateUnfrozenTime"
							size="medium"
							:picker-options="pickerShortcut2"
							format="yyyy-MM-dd HH:mm:ss"
							type="datetimerange"
							range-separator="-"
							:start-placeholder="$t('common.start_date')"
							:end-placeholder="$t('common.end_date')"
							align="right"
							value-format="timestamp"
							style="width: 320px"
							:default-time="defaultTime"
						></el-date-picker>
				</el-form-item>
				<el-form-item
					:label="`${$t('member.rebate_frozen_status')}:`"
					label-width="120px"
				>
					<el-select
						v-model="queryData.queryCondition.freezeStatus"
						size="medium"
						:placeholder="$t('common.select_all')"
					>
						<el-option
							:label="`${$t('common.account_status_unfrozen')}`"
							value="0"
						></el-option>
						<el-option
							:label="`${$t('common.account_status_suspend')}`"
							value="1"
						></el-option>
						<el-option
							:label="`${$t('common.all')}`"
						></el-option>
					</el-select>
				</el-form-item>
				<el-form-item
					:label="`${$t('common.member_number')}:`"
				>
					<el-input
						v-input="{ name: 'symbols' }"
						v-model="queryData.queryCondition.userName"
						size="medium"
						:placeholder="$t('common.please_enter')"
						clearable
						style="width: 180px"
					></el-input>
				</el-form-item>
				<el-form-item
					:label="`${$t('common.top_agent')}:`"
				>
					<el-input
						v-input="{ name: 'symbols' }"
						v-model="queryData.queryCondition.parentProxyName"
						size="medium"
						:placeholder="$t('common.please_enter')"
						clearable
						style="width: 180px"
					></el-input>
				</el-form-item>
				<el-form-item
					:label="`${$t('common.risk_control_level')}:`"
					class="flex-row-container"
					label-width="77px"
				>
					<el-select
						v-model="queryData.queryCondition.windControlId"
						size="medium"
						:placeholder="$t('common.select_all')"
						clearable
						collapse-tags
						:maxlength="10"
						style="width: 220px"
					>
						<el-option
							v-for="item in windControlLevelNameArr"
							:key="item.id"
							:label="item.windControlLevelName"
							:value="item.id"
						></el-option>
					</el-select>
				</el-form-item>
				<el-form-item
					:label="`${$t('member.frozen_operated_by')}`"
				>
					<el-input
						v-input="{ name: 'symbols' }"
						v-model="queryData.queryCondition.freezeBy"
						size="medium"
						:placeholder="$t('common.please_enter')"
						clearable
						style="width: 180px"
					></el-input>
				</el-form-item>
				<el-form-item>
					<el-button
						type="primary"
						icon="el-icon-search"
						:disabled="loading"
						size="medium"
						@click="search"
					>
						{{ $t('common.search') }}
					</el-button>
					<el-button
						icon="el-icon-refresh-left"
						:disabled="loading"
						size="medium"
						@click="reset"
					>
						{{ $t('common.reset') }}
					</el-button>
					<el-button
						v-if="hasPermission('90870043')"
						type="warning"
						icon="el-icon-download"
						size="medium"
						:loading="exportBtnLoading"
						@click="exportExcel"
					>
						{{ $t('common.export') }}
					</el-button>
				</el-form-item>
			</el-form>
		</template>
		<template slot="content">
			<el-table
				v-loading="loading"
				element-loading-spinner="el-icon-loading"
				border
				size="mini"
				class="small-size-table"
				:data="tableData"
				style="width: 100%"
				:header-cell-style="getRowClass"
				:max-height="tableHeight"
				highlight-current-row
			>
				<el-table-column
					key="userName"
					prop="userName"
					align="center"
					:label="$t('common.member_number')"
					min-width="160"
				>
					<template slot-scope="scope">
						<Copy
							v-if="!!scope.row.userName"
							:title="scope.row.userName"
							:copy="copy"
						>
							{{ scope.row.userName }}
						</Copy>
						<span v-else>-</span>
					</template>
				</el-table-column>
				<el-table-column
					prop="accountType"
					align="center"
					:label="`${$t('common.number_type')}`"
					show-overflow-tooltip
					min-width="120"
				>
					<template slot-scope="scope">
						<span
							v-if="scope.row.accountType === 1"
						>
							{{ $t('common.account_type_formal') }}
						</span>
						<span
							v-if="scope.row.accountType === 2"
						>
							{{ $t('common.account_type_business') }}
						</span>
						<span
							v-if="scope.row.accountType === 3"
						>
							{{ $t('common.account_type_replacement') }}
						</span>
					</template>
				</el-table-column>
				<el-table-column
					prop="merchantName"
					align="center"
					:label="`${$t('common.belong_merchant')}`"
					show-overflow-tooltip
					min-width="120"
				>
					<template slot-scope="scope">
						{{scope.row.merchantName}}
					</template>
				</el-table-column>
				<el-table-column
					key="parentProxyName"
					prop="parentProxyName"
					align="center"
					:label="$t('common.top_agent')"
					min-width="160"
				>
					<template slot-scope="scope">
						<Copy
							v-if="!!scope.row.parentProxyName"
							:title="scope.row.parentProxyName"
							:copy="copy"
						>
							{{ scope.row.parentProxyName }}
						</Copy>
						<span v-else>-</span>
					</template>
				</el-table-column>
				<el-table-column
					key="topProxyName"
					prop="topProxyName"
					align="center"
					:label="$t('member.belonging_general_agent')"
					min-width="160"
				>
					<template slot-scope="scope">
						<Copy
							v-if="!!scope.row.topProxyName"
							:title="scope.row.topProxyName"
							:copy="copy"
						>
							{{ scope.row.topProxyName }}
						</Copy>
						<span v-else>-</span>
					</template>
				</el-table-column>

				<el-table-column
					prop="accountStatus"
					align="center"
					:label="$t('common.account_status')"
					:min-width="getWidth(100)"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						<span
							v-if="
								scope.row.liquidationStatus === 1 ||
									scope.row.liquidationStatus === 2
							"
							class="disableRgba"
						>
							{{ $t('agent.liquidation') }}
						</span>
						<span v-else>
							<span
								v-if="!!scope.row.paymentLockStatus"
								class="deleteRgba"
							>
								{{ $t('common.account_lock_status') }}
								<br />
							</span>
							<span
								v-if="!!scope.row.loginLockStatus"
								class="disableRgba"
							>
								{{ $t('common.login_lock_status') }}
								<br />
							</span>
							<span
								v-if="!!scope.row.gameLockStatus"
								class="lockingRgba"
							>
								{{ $t('common.game_lock_status') }}
							</span>
							<span
								v-if="
									scope.row.loginLockStatus === 0 &&
										scope.row.gameLockStatus === 0 &&
										scope.row.paymentLockStatus === 0
								"
								class="normalRgba"
							>
								{{ $t('common.account_status_normal') }}
							</span>
						</span>
					</template>
				</el-table-column>
				<el-table-column
					prop="userLabel"
					align="center"
					:label="`${$t('member.label_name')}`"
					show-overflow-tooltip
					min-width="120"
				>
					<template slot-scope="scope">
						{{ scope.row.userLabel || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					prop="windControlName"
					align="center"
					:label="`${$t('common.risk_control_level')}`"
					show-overflow-tooltip
					min-width="120"
				>
					<template slot-scope="scope">
						{{ scope.row.windControlName || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					prop="freezeAt"
					align="center"
					:label="`${$t('member.rebate_frozen_time')}`"
					show-overflow-tooltip
					min-width="180"
				>
					<template slot-scope="scope">
						{{ scope.row.freezeAt || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					prop="freezeBy"
					align="center"
					:label="`${$t('member.frozen_operated_by')}`"
					show-overflow-tooltip
					min-width="120"
				>
					<template slot-scope="scope">
						{{ scope.row.freezeBy || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					prop="freezeRemark"
					align="center"
					:label="`${$t('member.rebate_frozen_remark')}`"
					show-overflow-tooltip
					min-width="150"
				>
					<template slot-scope="scope">
						{{ scope.row.freezeRemark || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					prop="unfreezeAt"
					align="center"
					:label="`${$t('member.rebate_unfrozen_time')}`"
					show-overflow-tooltip
					min-width="180"
				>
					<template slot-scope="scope">
						{{ scope.row.unfreezeAt || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					prop="unfreezeBy"
					align="center"
					:label="`${$t('member.unfrozen_operated_by')}`"
					show-overflow-tooltip
					min-width="120"
				>
					<template slot-scope="scope">
						{{ scope.row.unfreezeBy || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					prop="unfreezeRemark"
					align="center"
					:label="`${$t('member.rebate_unfrozen_remark')}`"
					show-overflow-tooltip
					min-width="120"
				>
					<template slot-scope="scope">
						{{ scope.row.unfreezeRemark || '-' }}
					</template>
				</el-table-column>
			</el-table>
			<!-- 分页 -->
			<el-pagination
				:total="total"
				:current-page.sync="pageNum"
				class="pageValue"
				background
				layout="total, sizes,prev, pager, next, jumper"
				:page-size="pageSize"
				:page-sizes="pageSizes"
				:pager-count="9"
				@current-change="handleCurrentChange"
				@size-change="handleSizeChange"
			></el-pagination>
		</template>
	</main-content>
</template>

<script>
import list from '@/mixins/list'
import { routerNames } from '@/utils/consts'
import MainContent from '@/components/MainContent/index.vue'
import dayjs from 'dayjs'

export default {
	name: routerNames.memberFrozenRebateStatusManagement,
	components: {
		MainContent
	},
	mixins: [list],
	data() {
		return {
			otherDependenComponents: [],
			tableHeight: 480,
			pageNum: 1,
			queryData: {
				pageNum: 1,
				pageSize: 100,
				queryCondition: {
					freezeAtEnd: undefined,
					freezeAtStart: undefined,
					freezeBy: undefined,
					freezeStatus: '1',
					id: undefined,
					merchantId: undefined,
					parentProxyName: undefined,
					unfreezeAtEnd: undefined,
					unfreezeAtStart: undefined,
					unfreezeBy: undefined,
					userId: undefined,
					userName: undefined,
					windControlId: undefined
				}
			},
			tableData: [],
			windControlLevelNameArr: [],
			total: 0,
			title: '',
			rebateFrozenTime: undefined,
			rebateUnfrozenTime: undefined,
			exportBtnLoading: false,
			loading: false
		}
	},
	computed: {
		windLevelTypeArr() {
			return this.globalDics.windLevelType || []
		}
		// windControlLevelName() {
		// 	return this.queryData.queryCondition.windControlLevelName
		// }
	},
	watch: {
	},
	created() {
		this.getMerchantDict('1')
		// this.queryData.windControlLevelName = ['all']
	},
	methods: {
		loadData() {
			this.loading = true
			this.tableData = []
			const [frozenStartTime, frozenEndTime] = this.rebateFrozenTime || []
			const [unfrozenStartTime, unfrozenEndTime] = this.rebateUnfrozenTime || []
			this.queryData.queryCondition.freezeAtStart = frozenStartTime ? dayjs(frozenStartTime).format('YYYY-MM-DD HH:mm:ss') : undefined
			this.queryData.queryCondition.freezeAtEnd = frozenEndTime ? dayjs(frozenEndTime).format('YYYY-MM-DD HH:mm:ss') : undefined
			this.queryData.queryCondition.unfreezeAtStart = unfrozenStartTime ? dayjs(unfrozenStartTime).format('YYYY-MM-DD HH:mm:ss') : undefined
			this.queryData.queryCondition.unfreezeAtEnd = unfrozenEndTime ? dayjs(unfrozenEndTime).format('YYYY-MM-DD HH:mm:ss') : undefined
			if(this.queryData.queryCondition.userName === '') this.queryData.queryCondition.userName = undefined
			if(this.queryData.queryCondition.parentProxyName === '') this.queryData.queryCondition.parentProxyName = undefined
			if(this.queryData.queryCondition.freezeBy === '') this.queryData.queryCondition.freezeBy = undefined
			this.queryData.pageNum = this.pageNum
			this.queryData.pageSize = this.pageSize
			let params = {
				...this.queryData
			}
			params = {
				...this.getParams(params)
			}

			this.$api
				.rebateStatusFreezeRecordPage(params)
				.then((res) => {
					if (res?.code === 200) {
						const { record, totalRecord } = res.data || {}
						this.tableData = Array.isArray(record)
							? Object.freeze(record)
							: []
						this.total = totalRecord || 0
					} else {
						this.$message({
							message:
								res?.msg ||
								this.$t('agent.interface_exceptions'),
							type: 'error'
						})
					}
					this.loading = false
				})
				.catch(() => {
					this.loading = false
				})
		},
		search() {
			this.pageNum = 1
			this.loadData()
		},
		reset() {
			this.pageNum = 1
			this.$refs['form'].resetFields()
			this.rebateFrozenTime = undefined
			this.rebateUnfrozenTime = undefined
			this.queryData = {
				pageNum: 1,
				pageSize: 100,
				queryCondition: {
					freezeAtEnd: undefined,
					freezeAtStart: undefined,
					freezeBy: undefined,
					freezeStatus: '1',
					id: undefined,
					merchantId: undefined,
					parentProxyName: undefined,
					unfreezeAtEnd: undefined,
					unfreezeAtStart: undefined,
					unfreezeBy: undefined,
					userId: undefined,
					userName: undefined,
					windControlId: undefined
				}
			}
			this.loadData()
		},
		exportExcel() {
				const [frozenStartTime, frozenEndTime] = this.rebateFrozenTime || []
				const [unfrozenStartTime, unfrozenEndTime] = this.rebateUnfrozenTime || []
				this.queryData.queryCondition.freezeAtStart = frozenStartTime ? dayjs(frozenStartTime).format('YYYY-MM-DD HH:mm:ss') : undefined
				this.queryData.queryCondition.freezeAtEnd = frozenEndTime ? dayjs(frozenEndTime).format('YYYY-MM-DD HH:mm:ss') : undefined
				this.queryData.queryCondition.unfreezeAtStart = unfrozenStartTime ? dayjs(unfrozenStartTime).format('YYYY-MM-DD HH:mm:ss') : undefined
				this.queryData.queryCondition.unfreezeAtEnd = unfrozenEndTime ? dayjs(unfrozenEndTime).format('YYYY-MM-DD HH:mm:ss') : undefined
				if(this.queryData.queryCondition.userName === '') this.queryData.queryCondition.userName = undefined
				if(this.queryData.queryCondition.parentProxyName === '') this.queryData.queryCondition.parentProxyName = undefined
				if(this.queryData.queryCondition.freezeBy === '') this.queryData.queryCondition.freezeBy = undefined
				this.queryData.pageNum = this.pageNum
				this.queryData.pageSize = this.pageSize
				let params = {
					...this.queryData
				}
				params = {
					...this.getParams(params)
				}
				this.exportBtnLoading = true
				this.exportExcelPublic({
					api: 'rebateStatusFreezeRecordExport',
					params
				}).finally(() => {
					this.exportBtnLoading = false
				})
		},

		// 获取风控层级
		getMerchantDict(val) {
			this.windControlLevelNameArr = []
			this.$api
				.getSelectWindControlLevel({
					merchantId: this.queryData.queryCondition.merchantId,
					windControlType: 1
				})
				.then((res) => {
					const { code, data, msg } = res || {}
					if (code === 200) {
						this.windControlLevelNameArr = data || []
					} else {
						this.$message({
							message: msg,
							type: 'error'
						})
					}
				})
		}
	}
}
</script>
<style lang="scss" scoped>
::v-deep .el-dialog__header {
	text-align: center;
	color: #909399;
	font-weight: 700;
}
::v-deep .tagheight .el-tag {
	height: 24px;
	line-height: 24px;
	min-width: 60px;
}
::v-deep .rempadding .el-dialog__body {
	padding: 0;
	padding-bottom: 30px;

	.contentBox,
	form {
		padding: 0 20px;
	}
}
::v-deep .el-input-number__decrease,
::v-deep .el-input-number__increase {
	display: none;
}
::v-deep .el-input-number--medium .el-input__inner {
	padding: 0 15px;
	text-align: left;
}
.decoration {
	text-decoration: underline;
	cursor: pointer;
}
.bodyBox {
	max-height: 400px;
	overflow: auto;
}
.headerBox {
	color: #000000d8;
	background: #fafafa;
	font-family: 'PingFang SC ', 'PingFang SC', sans-serif;
	font-weight: 650;
	border-top: 1px solid #e8e8e8;
	margin-top: 15px;
}
</style>
